<template>
    <el-table :data="props.list" stripe>
        <el-table-column label="店铺编号" prop="shopNo" min-width="100" />
        <el-table-column label="店铺名称" prop="shopName" min-width="140" />
        <el-table-column label="店铺类型" prop="remark" min-width="100">
            <template #default="{ row }">{{ SHOP_STATUS[row.type] }}</template>
        </el-table-column>
        <el-table-column label="店铺地址" prop="street" min-width="200">
            <template #default="{ row }">
                {{ getShopAddress(row) }}
            </template>
        </el-table-column>
        <el-table-column label="联系人" min-width="140">
            <template #default="{ row }">
                <div>{{ row.contactPerson }}</div>
                <div>{{ row.tel }}</div>
            </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" min-width="100">
            <template #default="{ row }">
                <div :class="['status', row.status == 1 ? 'status_green' : '']">
                    已{{ transformStream(row.status, 'IS_ENABLED') }}
                </div>
            </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="210">
            <template #default="{ row }">
                <el-button @click="onEdit(row)" size="small" v-auth="'storeList:edit'">编辑</el-button>
                <el-popconfirm
                    v-if="row.status == 1"
                    placement="top"
                    width="200"
                    cancel-button-type="text"
                    cancel-button-text="取消"
                    confirm-button-text="确定"
                    :icon="WarningFilled"
                    icon-color="#faad14"
                    :title="`确定要停用该店铺吗?`"
                    @confirm="onStatus(row)">
                    <template #reference>
                        <el-button v-auth="'storeList:disabled'" size="small"> 停用 </el-button>
                    </template>
                </el-popconfirm>
                <el-popconfirm
                    v-else-if="row.status == 2"
                    placement="top"
                    width="200"
                    cancel-button-type="text"
                    cancel-button-text="取消"
                    confirm-button-text="确定"
                    :icon="WarningFilled"
                    icon-color="#faad14"
                    :title="`确定要启用该店铺吗?`"
                    @confirm="onStatus(row)">
                    <template #reference>
                        <el-button v-auth="'storeList:enabled'" size="small"> 启用 </el-button>
                    </template>
                </el-popconfirm>
                <el-tooltip v-if="row.status == 2" effect="dark" placement="top" :disabled="!props.tooltip[row.shopId]">
                    <template #content>
                        <div style="max-width: 400px">{{ SHOP_TOOLTIP[props.tooltip[row.shopId]] }}</div>
                    </template>
                    <span style="margin-left: 12px">
                        <el-popconfirm
                            placement="top"
                            width="200"
                            cancel-button-type="text"
                            cancel-button-text="取消"
                            confirm-button-text="确定"
                            :icon="WarningFilled"
                            icon-color="#faad14"
                            title="店铺删除后，所有店铺相关信息丢失且不可恢复，确定要删除该店铺吗？"
                            @confirm="onDel(row)"
                            :disabled="props.tooltip[row.shopId] > 0">
                            <template #reference>
                                <el-button v-auth="'storeList:remove'" class="table-btn" size="small"> 删除 </el-button>
                            </template>
                        </el-popconfirm>
                    </span>
                </el-tooltip>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { WarningFilled } from '@element-plus/icons-vue';
import constants from '@/commons/constants';

const props = defineProps({
    list: { type: Array, default: () => [] },
    tooltip: { type: Object, default: () => ({}) }
});
const emit = defineEmits(['delete', 'edit', 'status']);

const SHOP_STATUS = constants.SHOP_STATUS;
const SHOP_TOOLTIP = constants.SHOP_TOOLTIP;
const getShopAddress = row => {
    row.provinceId = row.provinceId === row.cityId ? '' : row.provinceId;
    const shengshiqv = row.provinceId + row.cityId + row.areaId;
    return shengshiqv + row.street;
};
const onDel = row => {
    emit('delete', row);
};
const onEdit = row => {
    emit('edit', row);
};
const onStatus = row => {
    row.status == 2;
    emit('status', row);
};
</script>
<style scoped lang="scss">
.status {
    display: flex;
    align-items: center;
    &::before {
        display: inline-block;

        width: 8px;
        height: 8px;
        margin-right: 6px;

        content: '';

        border-radius: 4px;
        background: #cccccc;
    }
}
.status_green::before {
    background: #32d1ad;
}
</style>
